import { View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { Component } from 'react';
import RichText from '@/components/RichText';
import { globalStore } from '@/store';
import { getContrastShopList } from '@/service/apis/contrast/index';
import classnames from 'classnames';
import GoodsSwiper from '@/components/Swiper/index';
import './index.scss';
import ChooseSku from '../components/ChooseSku';
import ShopItem from '../components/ShopItem';

function getSkuList(skus) {
  let skuList = skus.map((item, key) => {
    return {
      name: item,
      id: key + 1,
    };
  });
  return skuList;
}

export default class Index extends Component {
  state = {
    active: 0,
    skuList: [],
    currentSkuInfo: {
      id: 0,
      name: '',
    },
    goodsDetail: {},
    allShopList: [],
    shopList: [],
    type: 'product',
  };

  componentDidMount() {
    const query = Taro.getCurrentInstance().router?.params;
    if (query?.goods_sn) {
      this.getShopList(query?.goods_sn);
    }
    if (query?.type) {
      this.setState({
        type: query.type,
      });
      Taro.setNavigationBarTitle({
        title: query?.type === 'product' ? '商品详情' : '服务详情',
      });
    }
  }

  getShopList = async (goods_sn) => {
    try {
      const { lat = 0, lng = 0 } = globalStore.currentLocation;
      const { data } = await getContrastShopList({
        goods_sn: goods_sn,
        lng,
        lat,
      });
      let skus = getSkuList(data.goods_specifications);
      this.setState({
        allShopList: data.goods_specifications_list,
        skuList: skus,
        goodsDetail: data.goods_info,
      });
      if (skus[0]) {
        const { id, name } = skus[0];
        this.setState({
          currentSkuInfo: {
            id: id,
            name: name,
          },
          shopList: this.filterShop(name),
        });
      } else {
        Taro.showToast({
          title: '缺少规格信息',
          icon: 'none',
        });
      }
    } catch (err) {
      Taro.showToast({
        title: err.message,
        icon: 'none',
      });
    }
  };

  filterShop = (name: string) => {
    const { allShopList } = this.state;
    return allShopList[name] || [];
  };

  onTimeUp = () => {
    Taro.showToast({
      title: '时间到',
      icon: 'success',
      duration: 2000,
    });
  };
  addToCart = () => {
    Taro.showToast({
      title: '添加成功',
      icon: 'success',
    });
  };
  onBuy = () => {
    Taro.navigateTo({
      url: '/subPages/order/submit/index',
    });
  };

  chooseItem = (id: number) => {
    this.setState({
      active: id,
    });
  };

  onShopHandle = (shop: any) => {
    const { type } = this.state;
    if (type === 'product') {
      Taro.navigateTo({
        url: '/pages/goods/detail/index?id=' + shop.id,
      });
    } else {
      Taro.navigateTo({
        url: '/pages/appointment/detail/index?id=' + shop.id,
      });
    }
  };

  onChangeSku = (sku) => {
    console.log('sku3333: ', sku);
    this.setState({
      currentSkuInfo: sku,
      shopList: this.filterShop(sku.name),
    });
  };

  render() {
    const { goodsDetail, active, skuList, shopList, currentSkuInfo, type } = this.state;
    return (
      <View className="goods-container">
        <View>
          <GoodsSwiper imageList={goodsDetail.gallery} />
        </View>
        <View className="goods-info-content">
          <View className="goods-name section">
            {/* <View className="good-price">
              <Text className="goods-price__red">
                <Text className="price-flag">￥</Text>
                {goodsDetail.price}
              </Text>
              <Text className="goods-price__gray">价格 </Text>
              <Text className="price-line">￥{goodsDetail.marketPrice}</Text>
            </View> */}
            <View className="goods-title">{goodsDetail.name}</View>
          </View>
          <View className="sku-container">
            <View className="sku-title">
              <View
                className={classnames('title-item', active === 0 ? 'active' : '')}
                onClick={() => this.chooseItem(0)}
              >
                驿站比价
              </View>
              <View
                className={classnames('title-item', active === 1 ? 'active' : '')}
                onClick={() => this.chooseItem(1)}
              >
                {type === 'product' ? '商品详情' : '服务详情'}
              </View>
            </View>
            {active === 0 && (
              <ChooseSku
                defaultSku={currentSkuInfo}
                skuList={skuList}
                onChangeSku={this.onChangeSku}
              />
            )}
          </View>
          {active === 0 ? (
            <View className="shop-list">
              {shopList.map((item) => {
                return <ShopItem key={item.id} shop={item} onHandle={this.onShopHandle} />;
              })}
            </View>
          ) : (
            <View className="goods-info section">
              <View className="goods-info__title">— 商品详情 —</View>
              <View className="rech-text">
                <RichText content={goodsDetail.cartoon_goods_detail || ''} />
              </View>
            </View>
          )}
        </View>
      </View>
    );
  }
}
